<template>
  <main class="w-full h-full dark:bg-black p-4">
    <use-table
      :all-data="allData"
      :columns="columns"
      :searchSelectOption="searchSelectOption"
      :personalized="true"
      :loading="loading"
      v-model:total="total"
      v-model:selectedRowKey="selectedRowKey"
      @modifyUserData="openModifyClassForm"
      @delete-select-user="clickDeleteSelectClass"
    >
      <template #function>
        <a-tooltip placement="bottom">
          <template #title>
            <span>添加班级</span>
          </template>
          <div class="cursor-pointer text-lg text-blue-500 mr-2" @click="openAddClassForm">
            <plus-circle-outlined />
          </div>
        </a-tooltip>
        <a-tooltip placement="bottom">
          <template #title>
            <span>删除选中班级</span>
          </template>
          <div class="cursor-pointer text-lg text-red-500" @click="clickDeleteSelectClass">
            <close-circle-outlined />
          </div>
        </a-tooltip>
      </template>
      <template #title> 班级管理 </template>
    </use-table>
    <modify-form
      v-model:visible="addClassFormVisible"
      modal-title-text="添加班级"
      @handleOk="handleAddClassOk"
    >
      <template #container>
        <div>
          <div class="flex items-center">
            <span class="w-22"> 班级名称： </span>
            <a-input v-model:value="addClassForm.class_name" />
          </div>
          <div class="flex items-center mt-3">
            <span class="w-22">教师姓名：</span>
            <a-input v-model:value="addClassForm.class_teacher" />
          </div>
          <div class="flex items-center mt-3">
            <span> 专业名称： </span>
            <a-select
              v-model:value="addClassForm.major_name"
              style="width: 150px; margin-left: 4px"
            >
              <a-select-option v-for="i in majorsData" :key="i.key" :value="i.major_name">
                {{ i.major_name }}
              </a-select-option>
            </a-select>
          </div>
          <div class="mt-3">
            <span>班级状态：</span>
            <a-switch
              :checked="addClassForm.status === 0 ? false : true"
              @click="
                addClassForm.status === 0 ? (addClassForm.status = 1) : (addClassForm.status = 0)
              "
              checked-children="启用"
              un-checked-children="禁用"
            ></a-switch>
          </div>
        </div>
      </template>
    </modify-form>
    <modify-form
      v-model:visible="modifyClassFormVisible"
      :modal-title-text="modifyFromTitle"
      @handleOk="handleModifyClassOk"
    >
      <template #container>
        <div>
          <div class="flex items-center">
            <span class="w-22"> 班级名称： </span>
            <a-input v-model:value="modifyClassForm.class_name" />
          </div>
          <div class="mt-3">
            <span>班级状态：</span>
            <a-switch
              :checked="modifyClassForm.status === 0 ? false : true"
              @click="
                modifyClassForm.status === 0
                  ? (modifyClassForm.status = 1)
                  : (modifyClassForm.status = 0)
              "
              checked-children="启用"
              un-checked-children="禁用"
            ></a-switch>
          </div>
          <div class="flex items-center mt-3">
            <span class="w-22">教师姓名：</span>
            <a-input v-model:value="modifyClassForm.class_teacher" />
          </div>
          <div class="flex items-center mt-3">
            <span class="w-18">专业名称：</span>
            <a-select v-model:value="modifyClassForm.major_name" style="width: 150px">
              <a-select-option v-for="i in majorsData" :key="i.key" :value="i.major_name">
                {{ i.major_name }}
              </a-select-option>
            </a-select>
          </div>
        </div>
      </template>
    </modify-form>
  </main>
</template>

<script setup lang="ts">
  import { getAllClass, deleteSelectClass, addClass, modifyClass, getMajors } from '@/api/student';
  import { ClassInfo } from '@/utils/interface';
  import { CloseCircleOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import { Majors } from '@/utils/interface';
  // 表头
  const columns = [
    {
      title: '班级名称',
      dataIndex: 'class_name',
      align: 'center',
      width: 120,
    },
    {
      title: '专业名称',
      dataIndex: 'major_name',
      align: 'center',
      width: 40,
    },
    {
      title: '班主任',
      dataIndex: 'class_teacher',
      align: 'center',
      width: 120,
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      width: 80,
    },
    {
      title: '学生数量',
      dataIndex: 'students',
      align: 'center',
      width: 120,
    },
    {
      title: '添加时间',
      dataIndex: 'add_time',
      align: 'center',
      width: 120,
      sorter: (a, b) => a.add_time - b.add_time,
    },
    {
      title: '操作',
      align: 'center',
      width: 80,
      dataIndex: 'operation',
    },
  ];
  const searchSelectOption: { value: string; label: string }[] = [
    {
      value: 'class_name',
      label: '班级名称',
    },
    {
      value: 'class_teacher',
      label: '班主任',
    },
  ];
  let total = ref(0);
  let allData = ref<ClassInfo[]>([]);
  let loading = ref(true);
  let selectedRowKey = ref<string[] | number[]>([]);
  const getAllClassData = async () => {
    loading.value = true;
    const { data } = (await getAllClass()) as any;
    allData.value = data as ClassInfo[];
    total.value = data.length;
    loading.value = false;
  };
  getAllClassData();

  let majorsData = ref<Majors[]>([]);
  let addClassFormVisible = ref(false);
  let addClassForm = ref({
    class_name: '',
    class_teacher: '',
    major_name: '',
    status: 0,
  });
  const openAddClassForm = async () => {
    addClassFormVisible.value = true;
  };
  const handleAddClassOk = async () => {
    const {
      class_name,
      class_teacher,
      status: addClassStatus,
      major_name,
    } = toRefs(addClassForm.value);
    if (!class_name.value || !class_teacher.value || !major_name.value) {
      message.warning('请填写完整信息');
      return;
    }
    const { status } = await addClass({
      class_name: class_name.value,
      class_teacher: class_teacher.value,
      status: addClassStatus.value,
      major_name: major_name.value,
    });
    if (status === 200) {
      message.success('添加成功');
      addClassFormVisible.value = false;
      await getAllClassData();
      for (const i in addClassForm.value) {
        addClassForm.value[i] = '';
      }
      addClassForm.value.status = 0;
    }
  };
  // 删除选中的班级
  const clickDeleteSelectClass = async (key: number[] | string[] | any) => {
    const selectKey = Array.isArray(key) ? key : selectedRowKey.value;
    if (selectKey.length === 0) {
      message.warning('请选择要删除的班级');
      return;
    }
    loading.value = true;
    const { status } = (await deleteSelectClass(selectKey)) as any;
    if (status === 200) {
      message.success('删除成功');
      getAllClassData();
    }
    loading.value = false;
  };

  let modifyFromTitle = ref('修改班级信息');
  let modifyClassFormVisible = ref(false);
  let modifyClassForm = ref<ClassInfo>({
    class_name: '',
    status: 0,
    class_teacher: '',
    major_name: '',
    key: -1,
  });
  const openModifyClassForm = (key: number | string) => {
    const {
      class_name,
      class_teacher,
      status,
      key: id,
      major_name,
    } = allData.value.find((item: any) => item.key === key) as ClassInfo;
    modifyClassForm.value = {
      class_name,
      status: status,
      class_teacher,
      key: id,
      major_name,
    };
    modifyFromTitle.value = `修改 ${class_name || '班级'} 的信息`;
    modifyClassFormVisible.value = true;
  };
  const handleModifyClassOk = async () => {
    const { class_name, class_teacher, status, major_name } = modifyClassForm.value;
    if (!class_name || !class_teacher || !major_name) {
      message.warning('请填写完整信息');
      return;
    }
    const { status: resStatus } = (await modifyClass({
      class_name,
      class_teacher,
      status: Number(status),
      id: modifyClassForm.value.key,
      major_name,
    })) as any;
    if (resStatus === 200) {
      message.success('修改成功');
      modifyClassFormVisible.value = false;
      await getAllClassData();
    }
  };
  onMounted(async () => {
    const { data: selectData } = await getMajors();
    majorsData.value = selectData as Majors[];
  });
</script>
